<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">计划编号</label>
              <div class="layui-input-inline">
                <input type="text" name="prpId" autocomplete="off" class="layui-input">
              </div>
            </div>
          <!--  <div class="layui-inline">
              <label class="layui-form-label">工序名称</label>
              <div class="layui-input-inline">
                <input type="text" name="processName" autocomplete="off" class="layui-input">
              </div>
            </div>-->
            <div class="layui-inline">
              <label class="layui-form-label">发布时间</label>
              <div class="layui-input-inline">
                <input type="text" name="plandate" autocomplete="off" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">计划确认人</label>
              <div class="layui-input-inline">
                <input type="text" name="planstaff" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <table class="layui-hide" id="test" lay-filter="demo"></table>


  <!--  <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
      </div>
    </script>

&lt;!&ndash;    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>&ndash;&gt;
-->
    <!--<script type="text/html" id="currentTableBar">

    </script>-->

  </div>
</div>

<<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="sendorder">派单</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail">查看详情</a>
</script>

<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
  /*分页展示数据*/
  layui.use(['form', 'table','layer','laydate'], function(){
    var table = layui.table;
    var laydate = layui.laydate;
    var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer

    //日期选择
    //常规用法
    laydate.render({
      elem: '#test1'
    });

    table.render({
      elem: '#test'
      ,url:'/mission/allmission'
      ,cols: [[
        {field:'prpId', width:160, title: '计划编号', sort: true}
        ,{field:'plandate', width:150, title: '发布日期'}
        ,{field:'planperiod', width:110, title: '完成天数', sort: true}
        ,{field:'planstaff', width:130, title: '计划确认人'}
        ,{field:'planremark', title: '备注', minWidth: 130}
        ,{field:'planState', width:120, title: '状态'}
        ,{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}
      ]],
      limit:5
      ,page: true
    });

    //监听工具条
    table.on('tool(demo)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){
        var id =data.prpId;
        popup(id);
      }else if(obj.event === 'sendorder'){
        $.ajax({
          url:'/workorder/selectWorkOrderById',
          type:'POST',
          data:{
            planid:data.prpId
          },
          dateType:'json',
          success:function(result){
            if(result.code==0){
              var index = layer.open({
                title: '派单',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['80%', '95%'],
                content: '/page/production/addWorkOrder.html?prpId='+data.prpId,
              });
              $(window).on("resize", function () {
                layer.full(index);
              });
            }else{
              layer.alert(result.msg);
            }
          }
        })

      }
    });

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      /*var result = JSON.stringify(data.field);
      layer.alert(result, {
          title: '最终的搜索信息',
          url:'/process/selectprocess'
      });*/

      //执行搜索重载
      table.reload('test', {
        page: {
          curr: 1
        }
        , where: {
          prpId: data.field.prpId,
          plandate:data.field.plandate,
          planstaff:data.field.planstaff,
        }
      }, 'data');

      return false;
    });

  });

  /*弹出框展示数据*/
  function popup(pid) {
    layui.use('table', function () {
      var table = layui.table;
      layer.open({
        type: 1,
        area: ["800px", '430px'],
        title: "计划项",
        maxmin: false,
        content: '<div><table id="templateTable" lay-filter="templateTable"></table></div>', //先定义一个数据表格的div框
        success: function (index, layero) {
          table.render({
            elem: '#templateTable'
            , height: 300
            , width: '100%'
            , url: '/mission/planunit?id='+pid //result格式为[{},{}],此处用的是固定数据,也可以用url来请求后台获取数据,如果使用url要根据layui规定的格式返回才可以渲染上,例：{"code": 0,"msg": "","count": 1000,"data": [{}, {}]} 或者使用parseData进行转化也可以
            , cols: [[ //设置数据表格表头
              {checkbox: true} //开启复选框
              , {field: 'plaId', title: '计划项编号', width: 140, hide: false}
              ,{field: 'prdName', title: '产品名称', width: 140, templet:'<div>{{d.product.prdName}}</div>', hide: false}
              ,{field: 'specification', title: '规格型号', width: 140, templet:'<div>{{d.product.specification}}</div>',hide: false}
              ,{field: 'productcolor', title: '颜色', width: 140, templet:'<div>{{d.product.productcolor}}</div>',hide: false}
              ,{field: 'pnumber', title: '数量', width: 140, hide: false}
            ]]
            , page: true //使用分页
            , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100] //动态设置每页显示数据的条数
            , limit: 5 //默认每页多少条
          });
          table.on('checkbox(templateTable)', function (obj) { //监听复选框,获取选择到的值
            let obj_data = obj.data; //获取到选中复选框上的一行数据
            let path=obj_data.path; //获取某个字段的值

          })
        },
        btn: ['确定', '关闭'],
        yes: function (index, layero) {
          layer.close(layer.index); //点击确定之后执行yes函数,关闭弹出层
        }
      });
    });

  }
</script>
</body>
</html>
